<template>
    <el-tabs v-model="dataOfMenu.id" type="border-card" class="menu-tabs" @tab-change="onChangeTab" @tab-remove="onRemoveTab">
        <el-tab-pane v-for="(item, idx) of dataOfMenu.data" :key="idx" :label="item.title" :name="item.id"
            :closable="true">
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// ===========================
//         变量声明
// ===========================

const props = defineProps({
    cacheName:{
        type:String,
        default:'menu_tabs2',
    },
    max: {
        type: Number,
        default: 10
    }
})
const emit = defineEmits(['change'])
const dataOfMenu = ref({ id: 0, data: [] })
const activeTab = ref({ id: 0 });

// ===========================
//         方法声明
// ===========================

const add = (item) => {
    console.log('[addItem]', item)
    let isExists = false;
    for (let obj of dataOfMenu.value.data) {
        if (obj.id == item.id) {
            isExists = true;
            break;
        }
    }
    if (!isExists) {
        dataOfMenu.value.data.push(item);
        if (dataOfMenu.value.data.length > props.max) {
            let idx = 0;
            for (let obj of dataOfMenu.value.data) {
                if (obj.id != activeTab.id) {
                    break;
                }
                idx++;
            }
            dataOfMenu.value.data.splice(idx, 1);
        }
    }
    dataOfMenu.value.id = item.id;
    getActiveItem(item.id);
    saveCache();
}

const onChangeTab = (id) => {
    dataOfMenu.value.id = id;
    getActiveItem(id);
    saveCache();
    emit('change', activeTab.value);
}
const onRemoveTab = (id) => {
    if (dataOfMenu.value.data.length == 1) {
        ElMessage.warning('已经是最后一个页面，关闭取消');
        return;
    }
    let nextItem = null, delIdx = -1;
    dataOfMenu.value.data.forEach((item, idx) => {
        if (item.id == id) {
            nextItem = dataOfMenu.value.data[idx + 1] || dataOfMenu.value.data[idx - 1];
            delIdx = idx;
        }
    })
    activeTab.value = nextItem;
    dataOfMenu.value.data.splice(delIdx, 1);
    dataOfMenu.value.id = nextItem.id;
    saveCache();
    emit('change', nextItem);
}

const saveCache = () => {
    window.sessionStorage.setItem(props.cacheName, JSON.stringify(dataOfMenu.value));
}

const getActiveItem = (id) => {
    dataOfMenu.value.data.filter(v => v.id == id).forEach(item => {
        activeTab.value = item;
    })
}

const init = (defaultItem = null) => {
    let cacheValue = window.sessionStorage.getItem(props.cacheName);
    if (cacheValue) {
        dataOfMenu.value = JSON.parse(cacheValue);
    } else {
        dataOfMenu.value.id = defaultItem.id;
        dataOfMenu.value.data.push(defaultItem);
    }
    getActiveItem(dataOfMenu.value.id);
    emit('change', activeTab.value);
}

// ===========================
//         导出声明
// ===========================

defineExpose({
    activeTab,
    init,
    add,
})
</script>

<style>
.menu-tabs {
    --el-tabs-header-height: 30px !important;
}
</style>
  